<template hidden-lg-and-down>
  <el-row :gutter="60">
    <el-col
      :span="18"
      :xs="24"
      :sm="24"
      :md="24"
      :lg="18"
      :style="{ marginTop: '20px' }"
    >
      <!-- 走马灯 -->
      <el-carousel
        :interval="5000"
        height="360px"
        arrow="outside"
        :style="{ marginBottom: '20px' }"
      >
        <el-carousel-item v-for="item in carouselList" :key="item.id">
          <div
            class="imgBox"
            @click="checkTitle(item)"
            :style="{ backgroundImage: 'url(' + item.image + ')' }"
          ></div>
          <h3 @click="checkTitle(item)">{{ item.title }}</h3>
        </el-carousel-item>
      </el-carousel>

      <!-- 信息列表 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          v-for="tag in articleLabels"
          :key="tag.label"
          :label="tag.label"
          :name="tag.name + ''"
        ></el-tab-pane>
      </el-tabs>

      <ul
        class="infinite-list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled"
        :infinite-scroll-delay="200"
      >
        <li v-for="item in articles" :key="item.id" class="infinite-list-item">
          <el-card
            :body-style="{ padding: '15px', height: '155px', display: 'flex' }"
            :style="{ borderRadius: '6px' }"
            shadow="hover"
          >
            <div>
              <el-image
                style="width: 230px; height: 155px"
                :src="item.image"
                fit="fill"
              ></el-image>
            </div>

            <div
              :style="{
                marginLeft: '20px',
                position: 'relative',
                width: '100%',
              }"
            >
              <div>
                <span
                  v-if="
                    item.userLabel === '' || item.userLabel == null
                      ? false
                      : true
                  "
                  class="badge badge-primary"
                  >{{ item.userLabel }}</span
                >
                <el-link :underline="false">
                  <h3 @click="checkTitle(item)">{{ item.title }}</h3>
                </el-link>
              </div>
              <div :style="{ letterSpacing: '0.03em' }">{{ item.outline }}</div>
              <!-- 设置div沉底 position: 'absolute'  bottom: '6px' -->
              <div
                :style="{
                  float: 'right',
                  width: '100%',
                  position: 'absolute',
                  bottom: '10px',
                }"
              >
                <div
                  v-for="tag in item.labelEntityList"
                  :key="tag.id"
                  :style="{ float: 'left' }"
                >
                  <el-link
                    v-if="tag.isShowCard == 1"
                    type="info"
                    :underline="false"
                    :style="{ marginRight: '10px' }"
                    @click="toSearchByLabel(tag)"
                    >{{ tag.labelNameCn }}</el-link
                  >
                </div>

                <time class="time" :style="{ float: 'right' }">{{
                  item.articleTime
                }}</time>
              </div>
            </div>
          </el-card>
        </li>
      </ul>
      <p v-if="loading" :style="{ textAlign: 'center' }">加载中...</p>
      <p v-if="noMore" :style="{ textAlign: 'center' }">没有更多了</p>
    </el-col>

    <!-- content侧边栏 -->
    <el-col class="hidden-md-and-down" :span="6" :style="{ paddingLeft: 0 }">
      <div :style="{ backgroundColor: 'white', borderRadius: '6px' }">
        <h3 :style="{ paddingTop: '20px', paddingLeft: '20px' }">每日快讯</h3>
        <el-divider></el-divider>
        <el-timeline :reverse="false">
          <!-- hsl / hsv / hex / rgb -->
          <el-timeline-item
            v-for="(item, index) in flashList"
            placement="top"
            :key="index"
            :timestamp="item.articleTime"
            :color="index == 0 ? '#494ade' : '#95bbe2'"
          >
            <el-link :underline="false" @click="checkTitle(item)">{{
              item.title
            }}</el-link>
          </el-timeline-item>
        </el-timeline>
      </div>

      <div :style="{ backgroundColor: 'white', borderRadius: '6px' }">
        <h3 :style="{ paddingTop: '20px', paddingLeft: '20px' }">今日赫兹</h3>
        <el-divider></el-divider>
        <div style="text-align: center">
          <el-progress
            type="dashboard"
            :percentage="percentage"
            :color="colors"
            :format="format"
            :width="160"
            :stroke-width="10"
          ></el-progress>
        </div>
        <div style="height: 10px"></div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      percentage: 55,
      colors: [
        { color: "#ff5e00", percentage: 10 },
        { color: "#ff8d00", percentage: 20 },
        { color: "#ffb100", percentage: 30 },
        { color: "#ffd400", percentage: 40 },
        { color: "#fff700", percentage: 50 },
        { color: "#efff00", percentage: 60 },
        { color: "#9dff00", percentage: 70 },
        { color: "#6eff00", percentage: 80 },
        { color: "#04ff00", percentage: 90 },
        { color: "#00ff89", percentage: 100 },
      ],
      count: 0,
      articles: [],
      articleLabels: [],
      selectType: "",
      selectLabel: "",
      activeName: "0",
      loading: false,
      allArticlesSize: 0,
      articlesNowSize: 0,
      articleItem: {},
      flashList: {},
      carouselList: {},
    };
  },
  //监听属性 类似于data概念
  computed: {
    noMore() {
      return this.articles.length >= this.allArticlesSize;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        this.getMoreArticles();
        this.loading = false;
      }, 1000);
    },

    format(percentage) {
      return `${percentage}`;
    },

    getArticle() {
      this.$http({
        url: this.$http.adornUrl("/article/tbarticles/getArticleList"),
        method: "get",
        params: this.$http.adornParams({
          type: this.selectType,
          label: this.selectLabel,
        }),
      }).then(({ data }) => {
        this.articles = data.articleList;
        this.articlesNowSize = this.articles.length;
      });
    },

    getMoreArticles() {
      this.$http({
        url: this.$http.adornUrl("/article/tbarticles/getMoreArticleList"),
        method: "get",
        params: this.$http.adornParams({
          type: this.selectType,
          label: this.selectLabel,
          start: this.articlesNowSize,
        }),
      }).then(({ data }) => {
        for (let index = 0; index < data.moreArticleList.length; index++) {
          this.articles.push(data.moreArticleList[index]);
        }
        this.articlesNowSize = this.articles.length;
      });
    },

    getArticlesLabelList() {
      this.$http({
        url: this.$http.adornUrl("/article/tbarticlelabel/getTagList"),
        method: "get",
      }).then(({ data }) => {
        this.articleLabels = data.tagList;
      });
    },

    getSelectArticlesAllSize() {
      this.$http({
        url: this.$http.adornUrl("/article/tbarticles/getArticleListSize"),
        method: "get",
        params: this.$http.adornParams({
          type: this.selectType,
          label: this.selectLabel,
        }),
      }).then(({ data }) => {
        this.allArticlesSize = data.articleListSize;
      });
    },

    getArticleCarousel() {
      this.$http({
        url: this.$http.adornUrl("/article/tbarticles/getArticleCarousel"),
        method: "get",
      }).then(({ data }) => {
        this.carouselList = data.carouselList;
      });
    },

    getFlashArticle() {
      this.$http({
        url: this.$http.adornUrl("/article/tbarticles/getFlashArticle"),
        method: "get",
      }).then(({ data }) => {
        this.flashList = data.flashList;
      });
    },

    getHzValue() {
      this.$http({
        url: this.$http.adornUrl("/public/tbhomepagemenu/getHzValue"),
        method: "get",
      }).then(({ data }) => {
        this.percentage = data.HzValue;
      });
    },

    handleClick(tab, event) {
      this.articles = [];
      this.selectLabel = tab.name;
      this.articlesNowSize = 0;
      this.getSelectArticlesAllSize();
      this.getArticle();
    },

    checkTitle(item) {
      this.articleItem = item;
      this.$router.push({
        path: "/article",
        query: { article: this.articleItem },
      });
    },

    toSearchByLabel(item) {
      this.$router.push({
        path: "/search-page",
        query: { selectLabel: item },
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getSelectArticlesAllSize();
    this.getArticle();
    this.getArticlesLabelList();
    this.getArticleCarousel();
    this.getFlashArticle();
    this.getHzValue();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.infinite-list {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0px;
}

.infinite-list li {
  list-style-type: none;
  padding-bottom: 15px;
}

.el-carousel__item h3 {
  color: white;
  font-size: 25px;
  margin: 0px;
  position: absolute;
  right: 10px;
  bottom: 30px;
  opacity: 1;
}

.imgBox {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  opacity: 0.7;
}

.el-carousel__item:nth-child(n) {
  background-color: #99a9bf;
  border-radius: 6px;
}

.el-divider {
  margin: 15px 0;
}

.el-timeline {
  padding-top: 10px;
  padding-left: 22px;
  padding-right: 22px;
}

.badge {
  border-radius: 2px;
  font-weight: 400;
  padding: 1px 5px;
  font-size: 13px;
}

.badge-primary {
  color: #fff;
  background-color: #448ef6;
}

.el-tab-pane {
  margin-right: 10px;
}

.el-link h3 {
  margin: 0;
  letter-spacing: 0.06em;
  height: 36px;
  line-height: 36px;
  /* 内容超出时隐藏 */
  overflow: hidden;
  text-overflow: ellipsis;
}

div /deep/.el-tabs__item:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  border-radius: 6px;
}

div /deep/.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: #0069d9;
  background-color: #0069d9;
  border-color: #0062cc;
  border-radius: 6px;
  color: #fff;
}

div /deep/.el-tabs__item {
  height: 30px;
  line-height: 30px;
  margin-right: 6px;
}
</style>

<style>
.el-tabs--card > .el-tabs__header {
  border-bottom: 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-left: 0;
  border-bottom: 0;
}
</style>